<template>
    <div>
        <div class="width-75 tc">
            <div class="z-header">
                <div @click="$router.back(-1)" class="lt">
                    <i class="iconfont icon-zuo m-t-18 fs-32"></i>
                </div>
                <div class="fs-32 c-3">
                    商品详情
                </div>
            </div>
        </div>
        <div class="width-75">
            <!--头像、名字和学校-->
            <div class="row m-t-28">
                <div>
                    <img :src="content.goods.userTo.portrait" alt="" class="portrait">
                </div>
                <div class="m-l-14">
                    <h2 class="fs-36 c-3">{{content.goods.userTo.nickName}}</h2>
                    <p class="fs-24 c-3 m-t-18">{{content.goods.school.name}}</p>
                </div>
            </div>
            <div class="fs-24 m-t-28">
                价钱: <span class="c-f3">￥{{content.goods.price}}</span>
            </div>
            <div class="fs-24 m-t-28">
                邮费: <span class="c-f3">￥{{content.goods.mailPrice}}</span>
            </div>
            <h3 class="m-t-28">{{content.goods.caption}}</h3>
            <div class="m-t-18">
                {{content.goods.introduce}}
            </div>
            <div>
                <img v-for="imgs in content.goods.images" :src="imgs" alt="" class="img-5 m-l-14 m-t-28">
            </div>
            <div class="tr">
                <router-link :to="{path:'/unusedBuy',query:{id: goodsId}}">
                    <button class="b-c2 c-f fs-24 udBuy">
                        立即购买
                    </button>
                </router-link>
            </div>
            
            <div class="m-b-10">
                <h4>留言:</h4>
                <ul>
                    <li v-for="word in content.goodsMessage" class="m-t-18 m-l-25">
                        {{word.user.nickName}} : {{word.body}}
                    </li>
                </ul>
            </div>
            <div class="unused-details-input">
                <input type="text" placeholder="留言" v-model="word"> 
                <button class="b-c2 c-f fs-24 udBuy" @click="leaveWord">
                    点击留言
                </button>
               
            </div> 
        </div>
    </div>
</template>
<script>
import { z } from '../../assets/js/common'
export default {
    data() {
        return {
            goodsId: this.$route.query.id, //id
            content: [], //详情内容
            word:"",//留言
        }
    },
    methods: {
        details() {
            var params = new URLSearchParams();
            params.append("goodsId", this.goodsId);
            this.$http({
                method: "post",
                url: localPath + "/goods/selectGoodsById",
                data: params
            }).then((data) => {
                var arr =  data.data.message;
                arr.goods.images = arr.goods.images.split(",");
                this.content = arr;
                console.log(this.content);
            }).catch((error) => {
                console.log(error);
            })
        },
        // 留言
        leaveWord(){
            if(this.word != ""){
                 var params = new URLSearchParams();
                params.append("goodsId", this.goodsId);
                params.append("body", this.word);
                this.$http({
                    method: "post",
                    url: localPath + "/goods/addGoodsMessage",
                    data: params
                }).then((data) => {
                    this.details();   //调用商品详情重新渲染评论
                    console.log(data);
                    this.word="";    //评论内容清空
                }).catch((error) => {
                    console.log(error);
                })
            }else{
                console.log("评论不能为空");
            }
               
        } 
    },
    mounted() {
        this.details();
        document.addEventListener(z());
    },

}
</script>
<style>
    .unused-details-input{
        position: fixed;
        width: 100%;
        bottom:0;
    }
    .unused-details-input > input{
        width: 70%;
    }
    .img-5{
        width: 5rem;
    }
    .udBuy{
        width: 1.5rem;
        height: .55rem;
    }
</style>

